import React, { Component } from 'react';

import { Table,Pagination  } from 'antd';

import request from './utils/request';

const columns = [
  {
    title: '编号',
    dataIndex: 'num',
  },
  {
    title: '公司',
    dataIndex: 'name',
  },
  {
    title: '事业',
    dataIndex: 'industry',
  },
  {
      title:'省份',
      dataIndex:'province'
  },
  {
      title:'作者',
      dataIndex:'author'
  },
  {
      title:'创建时间',
      dataIndex:'create_time'
  },
  {
      title:'浏览',
      dataIndex:'see'
  }
];


class App extends Component {
    state = {
        list:[],   //列表
        pagenum:1, //页码
        limit:2,    //每页的条数    
        total:0    //总条数
    }

    showTotal = (total) =>{
        return `Total ${total} items`;
      }

    componentDidMount(){
        this.getData();
    }

    getData = () => {
        let {pagenum,limit} = this.state;
        let cacheData = localStorage.getItem(`${pagenum}/${limit}`);
        if(cacheData){
            cacheData = JSON.parse(cacheData);
            this.setState({
                list:cacheData.data,
                total:cacheData.total
            })
        }else{
            request.get('/api/list',{params:{pagenum,limit}}).then(res => {
                if(res.data.code === 1){
                    localStorage.setItem(`${pagenum}/${limit}`,JSON.stringify({data:res.data.data,total:res.data.total}))
                    this.setState({
                        list:res.data.data,
                        total:res.data.total
                    })
                }
            })
        }
        
    }

    change = (page,pagesize) => {
        this.setState({
            pagenum:page
        },this.getData)
    }

    changeSize = (current,size)=>{
        this.setState({
            limit:size
        })
    }
    render() {
        let {total,limit,pagenum} = this.state;
        return (
            <div>
                 <Table pagination={false} columns={columns} dataSource={this.state.list} size="middle" />
                 <Pagination size="small" 
                    total={total} 
                    pageSize={limit} 
                    showSizeChanger 
                    showTotal={this.showTotal}
                    onChange={this.change}
                    current={pagenum}
                    pageSizeOptions={[1,2,3,4]}
                    onShowSizeChange={this.changeSize}
                />
            </div>
        );
    }
}

export default App;


